<template>
  <view class="root">
    <acme-app-bar title="设置"></acme-app-bar>
    
    <acme-cell-group style="margin-top: 25upx;">
      <acme-cell title="账户与安全" link navigateTo="/pages/widget/popup/index"/>
      <acme-cell title="隐私设置" link/>
    </acme-cell-group>
    
    <acme-cell-group style="margin-top: 25upx;">
      <acme-cell title="通知设置" link />
      <acme-cell title="通用设置" link />
    </acme-cell-group>
    
    <acme-cell-group style="margin-top: 25upx;">
      <acme-cell title="青少年模式" link value="未开启"/>
      <acme-cell title="深色模式" link />
    </acme-cell-group>
    
    <acme-cell-group style="margin-top: 25upx;">
      <acme-cell title="帮助与客服" link />
      <acme-cell title="鼓励一下" link />
      <acme-cell title="关于APP" link />
    </acme-cell-group>
    
    <acme-button block w="100%" :h="90" r="0" b="#fff" style="margin-top: 25upx; color: #333;" @click="logout">
      退出登录
    </acme-button>
    
    <acme-dialog v-model="showDialog" type="confirm" :scale="1.03" buttonType="round" title="确定退出登录？" />
  </view>
</template>

<script>
  import AcmeCellGroup from "@/components/acme-design/cell-group"
  import AcmeCell from "@/components/acme-design/cell"
  import AcmeDialog from '@/components/acme-design/dialog/index.vue'
  export default {
    components: {
      AcmeCellGroup,
      AcmeCell,
      AcmeDialog
    },
    data() {
      return {
        showDialog: false
      }
    },
    methods: {
      logout() {
        this.showDialog = true
      }
    }
  };
</script>

<style lang="scss">
  page {
    background-color: #F8F8F8;
  }
</style>

<style lang="scss" scoped>
  .root {
    overflow: hidden;
  }
</style>